<template>
  <div id="app">
    <el-card>
      <el-table border :data="list">
        <el-table-column
          label="序号"
          prop=""
          type="index"
          width="80px"
        ></el-table-column>
        <el-table-column
          label="名称"
          prop="skuName"
          width="width"
        ></el-table-column>
        <el-table-column
          label="描述"
          prop="skuDesc"
          width="width"
        ></el-table-column>
        <el-table-column label="默认图片" prop="" width="120px">
          <template slot-scope="{ row }">
            <img :src="row.skuDefaultImg" alt="" width="100px" height="100px" />
          </template>
        </el-table-column>
        <el-table-column
          label="重量"
          prop="weight"
          width="120px"
        ></el-table-column>
        <el-table-column
          label="价格"
          prop="price"
          width="120px"
        ></el-table-column>
        <el-table-column label="操作" prop="" width="width">
          <template slot-scope="{ row }">
            <!-- 上架和下架是二选一 -->
            <!-- 上架 -->
            <el-button
              type="success"
              icon="el-icon-sort-down"
              size="mini"
              v-if="row.isSale === 0"
              @click="sale(row)"
            ></el-button>
            <!-- 下架 -->
            <el-button
              v-else
              type="success"
              icon="el-icon-sort-up"
              size="mini"
              @click="cancel(row)"
            ></el-button>
            <!-- 修改 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="edit"
            ></el-button>
            <!-- 查看详情 -->
            <el-button
              type="info"
              icon="el-icon-info"
              size="mini"
              @click="getInfo(row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- 

           @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
       -->
      <el-pagination
        style="text-align: center"
        :current-page="page"
        :page-sizes="[3, 5, 10]"
        :page-size="limit"
        layout="prev, pager, next, jumper,->,total, sizes"
        :total="total"
        @current-change="getSku"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </el-card>
    <!-- 抽屉 -->
    <drawer ref="drawer"></drawer>
  </div>
</template>

<script>
import { getSkuList, onSale, cancel, getSkuInfo } from "@/api/product/sku";
import drawer from "./drawer.vue";
export default {
  name: "Sku",
  components: { drawer },

  data() {
    return {
      page: 1, //第几页
      limit: 3, // 一页显示第三条
      list: [], //数据
      total: 0, //总数据
    };
  },
  mounted() {
    this.getSku();
  },
  methods: {
    async getSku(page = 1) {
      this.page = page;
      let res = await getSkuList(this.page, this.limit);
      console.log(res);
      if (res.code == 200) {
        this.list = res.data.records;
        this.total = res.data.total;
      }
    },
    // 一页展示多少条数据
    handleSizeChange(limit) {
      this.limit = limit;
      this.getSku();
    },
    // 上架
    async sale(row) {
      let res = await onSale(row.id);
      if (res.code == 200) {
        console.log(res);
        row.isSale = 1;
        this.$message.success("下架成功");
      }
    },
    // 下架
    async cancel(row) {
      let res = await cancel(row.id);
      if (res.code == 200) {
        console.log(res);
        row.isSale = 0;
        this.$message.success("上架成功");
      }
    },
    // 修改
    edit() {
      this.$message("该功能开发中 ");
    },
    getInfo(row) {
      this.$refs.drawer.getInfo(row);
    },
  },
};
</script>
